<template>
  <div class="container">
    <!--    歌曲列表区域-->
    <div class="music-list">

      <div class="list-content">
        <a-list item-layout="horizontal" :data-source="musicList">
          <a-list-item slot="renderItem" slot-scope="item, index" @click="setPlay(item)">
            <a-space :size="30" @click="showDrawer(item.id)" >
              <div>{{ index + 1 }}</div>
              <div>{{ item.songName }}</div>
              <div>{{ item.singer }}</div>
            </a-space>

          </a-list-item>
        </a-list>

      </div>

    </div>
    <a-drawer
        title="全部热评"
        placement="right"
        :closable="false"
        :visible="visible"
        :get-container="false"
        :wrap-style="{ position: 'absolute' }"
        @close="onClose"
    >
<!--评论列表-->
      <a-list
          class="comment-list"
          item-layout="horizontal"
          :data-source="commentsData"
      >
        <a-list-item slot="renderItem" slot-scope="item, index">

          <a-comment :author="item.username">
            <template slot="actions">
              <span>Reply to</span>
            </template>
            <p slot="content">
              {{ item.content }}
            </p>
          </a-comment>

        </a-list-item>

      </a-list>

    </a-drawer>

    <!--    <div style="height: 20px;width: 100%;background-color: #1890ff;margin: 0;padding: 0;"></div>-->

    <!--    audio控件区域-->
    <div class="wrapper">
      <aplayer
          autoplay
          :music="music"
          :key=music.src
      />
    </div>

  </div>


</template>

<script>

import Aplayer from 'vue-aplayer'
import {fuzzyQuery, getComments, randMusic} from "@/request/api";


// 防抖函数
const debounce = function debounce(fn, delay) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    let args = arguments;
    let that = this;
    timer = setTimeout(function () {
      fn.apply(that, args);
    }, delay);
  };
};


export default {
  props: ['searchVal'],
  components: {
    Aplayer
  },
  data() {
    return {
      musicList: null,
      count: 0,
      music: {
        title: 'secret base~君がくれたもの~',
        artist: 'Silent Siren',
        src: 'null',
        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
      },
      visible: false,
      commentsData: {},

    };
  },
  mounted() {
    // this.getCommentsList(1)
    if (this.musicList == null){
      this.randMusicWhileListIsNull()
    }
  },

  methods: {
    // 搜索歌曲
    searchMusic(val) {
      this.musicList = null
      fuzzyQuery({songName: val}).then(res => {
        this.count = res.data.length
        this.musicList = res.data
      })

    },
    randMusicWhileListIsNull(){
      randMusic().then(res=>{
        this.musicList = res.data

      })
    },
    // 获取评论
    getCommentsList(id){
      console.log(id)
      getComments({musicId: id}).then(res=>{
        this.commentsData = res.data
        console.log(this.commentsData)
      })
    },
    // 切换歌曲
    setPlay(item) {
      this.music.title = item.songName
      this.music.pic = item.picUrl
      this.music.src = item.songUrl
      // this.music.src = item.songUrl
      this.music.artist = item.singer
    },
    afterVisibleChange(val) {
      console.log('visible', val);
    },
    showDrawer(id) {
      this.getCommentsList(id)
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },

  },
  watch: {
    searchVal: debounce(function (val) {
      this.searchMusic(val)
    }, 2000)
  }
};
</script>
<style>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

}

.music-list {
  width: 100%;
  height: 80%;
  /*border: 1px red solid;*/
  margin-bottom: 0px;
  display: flex;

}

.list-content {
  width: 100%;
  height: 300px;
  /*border: 1px #02f122 solid;*/
  overflow: auto;
}


.wrapper {
  width: 100%;
  position: absolute;
  bottom: 0;


}
</style>
